<template>
  <div class="module">
    <section class="menu-box">
      <div>
        <span>菜单功能：</span>
        <ul>
          <li v-for="(item, i) in menuList" :key="i" @click="checkMenu(item)"
              :class="checkedId === item.id? 'checked': ''"
          >{{ item.label }}
          </li>
        </ul>
      </div>
    </section>
    <section class="list-box">
      <div class="single-box" v-for="item in pageList" :key="item.id" @click="checkClick(item)">
        <img :src="item.img" alt=""/>
        <h4>{{ item.title }}</h4>
        <p>{{ item.mess }}</p>
      </div>
    </section>
  </div>
</template>

<script>
  import axios from 'axios'
  import store from '@/store'

  export default {
    name: 'module',
    data() {
      return {
        baseUrl: '',
        serchName: '',
        checkedId: 'all',
        data: [
          {
            id: 1, label: '我的任务',
            alwaysShow: true,
            children: [
              {
                title: '待办提醒',
                mess: '待办提醒',
                type: 1,
                img: require ('../assets/manage/jsc/人才库.jpg'),
                menuId: '0008538a-7a96-494e-b7de-70d6c31bdfa8',
                code: 'To-do_reminder',
                menuName: '待办提醒',
                url: '/hr2/home/needToDoTask',
                permi: '/hr2/home/needToDoTask'
              }
            ]
          },
          {
            id: 2, label: '个人自助',
            children: [
              {
                title: '个人信息管理',
                mess: '个人信息管理',
                type: 1,
                img: require ('../assets/manage/dept/部门指标库看板.jpeg'),
                menuId: '005ada4d-e6bf-4919-99ee-c5dd72b7b40d',
                code: 'Personal_information_management',
                menuName: '个人信息管理',
                url: '/personalPortrait?from=employeeHome',
                permi: '/personalPortrait?from=employeeHome'
              }, {
                title: '员工成长树优化',
                mess: '员工成长树优化',
                type: 0,
                img: require ('../assets/manage/dept/部门指标库看板.jpeg'),
                menuId: '00ee902f-e415-4645-b69a-c34816ee831c',
                code: 'Employee_growth_tree_optimization',
                menuName: '员工成长树优化',
                url: '/cokpitMenu/employeeGrow',
                permi: '/manage/ygczs'
              }, {
                title: '岗位成长计划',
                mess: '岗位成长计划',
                type: 0,
                img: require ('../assets/manage/jsc/岗位成长计划.jpeg'),
                menuId: '019013e2-435a-42b9-9688-35dd804c48d9',
                code: 'Job_growth_plan',
                menuName: '岗位成长计划',
                url: '/cokpitMenu/jobGrowthPlanMenu',
                permi: '/manage/gwczjh'
              }, {
                title: '人员绩效管理',
                mess: '人员绩效管理',
                type: 0,
                img: require ('../assets/manage/jsc/员工成长树.jpeg'),
                menuId: '0287354d-cf3b-492f-bd3f-95a56a5ff863',
                code: 'People_performance_management',
                menuName: '人员绩效管理',
                url: '/personInfoManage/performance',
                permi: '/manage/ryperformance'
              }
            ]
          },
          {
            id: 3, label: '申报专栏',
            children: [
              {
                title: '国网专家人才申报',
                mess: '国网专家人才申报',
                type: 1,
                img: require ('../assets/manage/dept/部门绩效查询.jpeg'),
                menuId: '02c16f40-adfb-4876-b51b-487eb3116930',
                code: 'State_Grid_Expert_Talent_Application',
                menuName: '国网专家人才申报',
                url: '/guowangzhuanjiarencaiyulan',
                permi: '/guowangzhuanjiarencaiyulan'
              }, {
                title: '职称评定申报',
                mess: '职称评定申报',
                type: 1,
                img: require ('../assets/manage/dept/部门绩效考核.jpeg'),
                menuId: '039f7e68-36c7-4fb1-a367-59bda26baa9c',
                code: 'Professional_title_evaluation_application',
                menuName: '职称评定申报',
                url: '/zhichengshenbao',
                permi: '/zhichengshenbao'
              }, {
                title: '高级技师申报',
                mess: '高级技师申报',
                type: 1,
                img: require ('../assets/manage/dept/部门绩效考核办公室.jpg'),
                menuId: '046520a2-4592-452d-85be-4ae8986494db',
                code: 'Senior_technician_application',
                menuName: '高级技师申报',
                url: '/gjjssb',
                permi: '/gjjssb'
              }, {
                title: '技师及以下申报',
                mess: '技师及以下申报',
                type: 1,
                img: require ('../assets/manage/jsc/人才库.jpg'),
                menuId: '04aef2a0-16e9-4c11-90a6-d6b565d09a26',
                code: 'Technician_and_below_declaration',
                menuName: '技师及以下申报',
                url: '/gjjssb?from=jsjyx',
                permi: '/gjjssb?from=jsjyx'
              }, {
                title: '青年托举人才申报',
                mess: '青年托举人才申报',
                type: 1,
                img: require ('../assets/manage/jsc/员工成长树.jpeg'),
                menuId: '0503e30b-45f7-470b-9718-2f72c10e3ba4',
                code: 'Application_for_young_talents',
                menuName: '青年托举人才申报',
                url: '/qnrctj',
                permi: '/qnrctj'
              }, {
                title: '岗位竞聘',
                mess: '岗位竞聘',
                type: 1,
                img: require ('../assets/manage/jsc/员工队伍情况.jpeg'),
                menuId: '05b7b826-caf0-400e-882b-a9c886996eed',
                code: 'Job_competition',
                menuName: '岗位竞聘',
                url: '/guowangzhuanjiarencaiyulan?from=jpsb',
                permi: '/guowangzhuanjiarencaiyulan?from=jpsb'
              }, {
                title: '优秀人才申报',
                mess: '优秀人才申报',
                type: 1,
                img: require ('../assets/manage/jsc/员工成长树.jpeg'),
                menuId: '07b6e939-c8ff-497b-bfdd-878a2b6172b8',
                code: 'Application_for_outstanding_talents',
                menuName: '优秀人才申报',
                url: '/TMdeclare?from=employeeHome',
                permi: '/TMdeclare?from=employeeHome'
              }, {
                title: '职称认定申报',
                mess: '职称认定申报',
                type: 1,
                img: require ('../assets/manage/dept/部门管理.jpg'),
                menuId: '07ca5350-0b33-4b21-a01e-7d3fbb19a70e',
                code: 'Job_title_certification_application',
                menuName: '职称认定申报',
                url: '/jobBatch?from=employeeHome',
                permi: '/jobBatch?from=employeeHome'
              }, {
                title: '个人企业年金查询',
                mess: '个人企业年金查询',
                type: 1,
                img: require ('../assets/manage/dept/部门绩效考核办公室.jpg'),
                menuId: '0979937c-9b44-4836-8267-0235b1f1c87a',
                code: 'Personal_enterprise_annuity_inquiry',
                menuName: '个人企业年金查询',
                url: '/njcx',
                permi: '/njcx'
              }
            ]
          },
          {
            id: 4, label: '薪档调整申报',
            children: [
              {
                title: '个人积分查询',
                mess: '个人积分查询',
                type: 1,
                img: require ('../assets/manage/dept/部门图表.jpeg'),
                menuId: '09944675-8d5a-4a48-b0b7-2c4dc9f67f74',
                code: 'Personal_points_inquiry',
                menuName: '个人积分查询',
                url: '/hr2/salaryAdjustment/salaryDeclare/salaryDeclareMain?pathname=personPoint',
                permi: '/hr2/salaryAdjustment/salaryDeclare/salaryDeclareMain?pathname=personPoint'
              }, {
                title: '薪档调整申报',
                mess: '薪档调整申报',
                type: 1,
                img: require ('../assets/manage/dept/部门绩效考核办公室.jpg'),
                menuId: '09a2b982-0d5c-4347-b9fd-249a083013e2',
                code: 'Salary_adjustment_report',
                menuName: '薪档调整申报',
                url: '/hr2/salaryAdjustment/salaryDeclare/salaryDeclareMain',
                permi: '/hr2/salaryAdjustment/salaryDeclare/salaryDeclareMain'
              }, {
                title: '积分核实',
                mess: '积分核实',
                type: 1,
                img: require ('../assets/manage/dept/考核规则.jpeg'),
                menuId: '0a0ac270-f9d0-4da5-85a0-c52cfd7b81b0',
                code: 'Points_Verification',
                menuName: '积分核实',
                url: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=integraVerify',
                permi: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=integraVerify'
              }, {
                title: '积分调整',
                mess: '积分调整',
                type: 1,
                img: require ('../assets/manage/dept/部门绩效考核办公室.jpg'),
                menuId: '0ab549b2-a8c2-4969-8839-ce9c20775f15',
                code: 'Points_adjustment',
                menuName: '积分调整',
                url: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=integralAdjust',
                permi: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=integralAdjust'
              }, {
                title: '薪档申报查询',
                mess: '薪档申报查询',
                type: 1,
                img: require ('../assets/manage/dept/部门图表.jpeg'),
                menuId: '0b6a5d1e-58ed-426f-b43f-57434cdb94c0',
                code: 'Salary_report_enquiry',
                menuName: '薪档申报查询',
                url: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=salaryAdjustInquire',
                permi: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=salaryAdjustInquire'
              }, {
                title: '积分配置',
                mess: '积分配置',
                type: 1,
                img: require ('../assets/manage/dept/部门图表.jpeg'),
                menuId: '0ba025bb-70ae-4b14-9542-b81f4315a72c',
                code: 'Points_configuration',
                menuName: '积分配置',
                url: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=integralConfigList',
                permi: '/hr2/salaryAdjustment/salaryVerify/salaryVerifyMain?pathname=integralConfigList'
              }
            ]
          },
          {
            id: 5, label: '综合查询',
            children: [
              {
                title: '花名册',
                mess: '花名册',
                type: 1,
                img: require ('../assets/manage/jsc/岗位成长计划.jpeg'),
                menuId: '003105a6-920b-4916-b4d9-88e8828c3ee2',
                code: 'Long-term_employee_nickname',
                menuName: '长期职工花名',
                url: '/EmployeeRoster',
                permi: '/EmployeeManagement/EmployeeRoster'
              }
            ]
          },
          {
            id: 6, label: '领导驾驶舱',
            children: [
              {
                title: '员工队伍情况',
                mess: '员工队伍情况',
                type: 0,
                img: require ('../assets/manage/jsc/员工队伍情况.jpeg'),
                menuId: '0bd0d09c-6a6f-4b15-a962-a4b49179ad57',
                code: 'Workforce_situation',
                menuName: '员工队伍情况',
                url: '/cokpitMenu/cokpitkanban',
                permi: '/manage/yuangongduiwu'
              }, {
                title: '人才库',
                mess: '人才库',
                type: 0,
                img: require ('../assets/manage/jsc/人才库.jpg'),
                menuId: '0d1fb3e6-5b6c-4169-b5f2-3971f6643ce2',
                code: 'talent_pool',
                menuName: '人才库',
                url: '/cokpitMenu/talentPool',
                permi: '/manage/rencaiku'
              }
            ]
          },
          {
            id: 7, label: '员工绩效管理',
            children: [
              {
                title: '花名册',
                mess: '花名册',
                type: 0,
                img: require ('../assets/manage/花名册.jpeg'),
                menuId: '0dc99845-616d-4785-bf44-d3a418a9a2d6',
                code: 'Roster',
                menuName: '花名册',
                url: '/performanceMenu/roster',
                permi: '/manage/chuamingc'
              }, {
                title: '绩效考核',
                mess: '绩效考核',
                type: 0,
                img: require ('../assets/manage/员工绩效考核.jpeg'),
                menuId: '0de5c2c4-efe7-48ff-bba8-9932497b8d4a',
                code: 'performance_appraisal',
                menuName: '绩效考核',
                url: '/performanceMenu/performance',
                permi: '/manage/jixiaokaohe'
              }, {
                title: '绩效办公室',
                mess: '绩效办公室',
                type: 0,
                img: require ('../assets/manage/部门绩效办公室.jpg'),
                menuId: '0e0bf323-f448-452c-8f01-0762b813e82a',
                code: 'Performance_Office',
                menuName: '绩效办公室',
                url: '/performanceMenu/office',
                permi: '/manage/jxbangongs'
              }, {
                title: '绩效管理委员会',
                mess: '绩效管理委员会',
                type: 0,
                img: require ('../assets/manage/绩效管理委员会.jpeg'),
                menuId: '0e1a97e1-07f4-4686-8a73-9cee4b74e195',
                code: 'Performance_Management_Committee',
                menuName: '绩效管理委员会',
                url: '/performanceMenu/officeother',
                permi: '/manage/weiyuanhui'
              }, {
                title: '员工审批',
                mess: '员工审批',
                type: 0,
                img: require ('../assets/manage/员工审批.jpeg'),
                menuId: '0e7049fb-728e-4032-bbe5-762b2e5b1663',
                code: 'Employee_Approval',
                menuName: '员工审批',
                url: '/performanceMenu/appeal',
                permi: '/manage/yuangshenpi'
              }
            ]
          },
          {
            id: 8, label: '部门绩效管理',
            children: [
              {
                title: '部门绩效考核',
                mess: '部门绩效考核',
                type: 0,
                img: require ('../assets/manage/dept/部门绩效考核.jpeg'),
                menuId: '0ea3c5ff-0a4c-41a2-9bbb-566dc57b549c',
                code: 'Department_performance_appraisal',
                menuName: '部门绩效考核',
                url: '/depperformanceMenu/depperformance',
                permi: '/manage/bumenjxkh'
              }, {
                title: '部门绩效办公室',
                mess: '部门绩效办公室',
                type: 0,
                img: require ('../assets/manage/dept/部门绩效考核办公室.jpg'),
                menuId: '0ebdbdc9-ffee-4488-b95a-42748cec3a8f',
                code: 'Department_Performance_Office',
                menuName: '部门绩效办公室',
                url: '/depperformanceMenu/depperformanceoffice',
                permi: '/manage/bumenjxbgs'
              }, {
                title: '部门绩效管理委员会',
                mess: '部门绩效管理委员会',
                type: 0,
                img: require ('../assets/manage/dept/部门绩效管理委员会.jpg'),
                menuId: '0ef1ea93-7ab7-4774-be18-54ef43acf248',
                code: 'Department_Performance_Management_Committee',
                menuName: '部门绩效管理委员会',
                url: '/depperformanceMenu/depperformanceofficeother',
                permi: '/manage/bmglweiyh'
              }, {
                title: '考核规则管理',
                mess: '考核规则管理',
                type: 0,
                img: require ('../assets/manage/dept/考核规则.jpeg'),
                menuId: '0fc26df5-e807-4fd7-bb24-078fa1ff6d7c',
                code: 'Assessment_rules_management',
                menuName: '考核规则管理',
                url: '/depperformanceMenu/deptexaminelrules',
                permi: '/manage/bmgzgl'
              }, {
                title: '部门审批',
                mess: '部门审批',
                type: 0,
                img: require ('../assets/manage/dept/部门审批.jpg'),
                menuId: '0feead96-ef51-413f-8804-9752a4e50ff1',
                code: 'DepartmentApproval',
                menuName: '部门审批',
                url: '/depperformanceMenu/depappealform',
                permi: '/manage/bmsp'
              }, {
                title: '部门图表',
                mess: '部门图表',
                type: 0,
                img: require ('../assets/manage/dept/部门图表.jpeg'),
                menuId: '10a58a70-c851-4e28-8026-e0a350d7a647',
                code: 'department_chart',
                menuName: '部门图表',
                url: '/depperformanceMenu/depchart',
                permi: '/manage/bumentub'
              }, {
                title: '部门指标库看板',
                mess: '部门指标库看板',
                type: 0,
                img: require ('../assets/manage/dept/部门指标库看板.jpeg'),
                menuId: '1191952a-6148-481e-8447-60a257477145',
                code: 'Department_indicator_library_dashboard',
                menuName: '部门指标库看板',
                url: '/depperformanceMenu/depindexchart',
                permi: '/manage/bumzbk'
              }, {
                title: '部门绩效查询',
                mess: '部门绩效查询',
                type: 0,
                img: require ('../assets/manage/dept/部门绩效查询.jpeg'),
                menuId: '12b29e24-ce40-49d1-b986-f2a72a18d943',
                code: 'Department_performance_inquiry',
                menuName: '部门绩效查询',
                url: '/depperformanceMenu/depperformanceinfo',
                permi: '/manage/bmjxcx'
              }, {
                title: '部门管理',
                mess: '部门管理',
                type: 0,
                img: require ('../assets/manage/dept/部门管理.jpg'),
                menuId: '12b6b5d6-5c77-4884-8aa2-9718c25c5a3c',
                code: 'DepartmentManagement',
                menuName: '部门管理',
                url: '/depperformanceMenu/deptInfo',
                permi: '/manage/bmgl'
              }
            ]
          },
          {
            id: 9, label: '定员信息',
            children: [
              {
                title: '定员定额管理',
                mess: '定员定额管理',
                type: 1,
                img: require ('../assets/manage/jsc/员工队伍情况.jpeg'),
                menuId: '137b800e-9142-4b7b-8ca7-597b8b18dc05',
                code: 'DepartmentManagement',
                menuName: 'Staffing_quota_management',
                url: '/hr2/orgManage/FixedNumberManage',
                permi: '/hr2/orgManage/FixedNumberManage'
              }
            ]
          }

        ]
      }
    },
    computed: {
      menuList() {
        const arr = this.data.map (item => ({ label: item.label, id: item.id }))
        arr.unshift ({ label: '全部', id: 'all' })
        return arr
      },
      pageList() {
        const permissionList = store.state && store.state.permissionList.toString ()
        let arr = []
        let arrOther = []
        if (this.checkedId === 'all') {
          // 全部
          this.data.forEach (i => {
            arr.push (...i.children)
          })
        } else {
          arr = this.data.find (item => item.id === this.checkedId).children
        }
        arr.forEach (v => {
          const includesBanana = permissionList.includes (v.permi)
          if (includesBanana) {
            arrOther.push (v)
          }
        })
        return arrOther
      }
    },
    created() {
      this.getJumpUrl ()
    },
    methods: {
      checkMenu(obj) {
        this.checkedId = obj.id
      },
      checkClick(item) {
        if (item.type === 0) {
          const route = this.$router.push (item.url)
        } else {
          console.log ('baseUrl' + this.baseUrl)
          let obi = {
            conent: this.baseUrl + item.url,
            menuName: item.menuName,
            menuId: item.menuId,
            children: [],
            code: item.code
          }
          this.handleMenu (obi)
        }
      },
      handleMenu(val) {
        val.url = val.conent
        val.name = val.menuName
        val.id = val.menuId
        val.code = val.code || ''
        top.postMessage (JSON.stringify (val), '*')
      },
      getJumpUrl() {
        axios ({
          method: 'get',
          url: '/hr-xc-human-resources-perform-manage/authUser/getJumpUrl'
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            this.baseUrl = data.result.msg
          }
        })
      }
    }
  }
</script>

<style>
  .module {
    background: #eee;
    min-height: 100%;
    width: 100%;
    margin-top: 40px;
  }

  .head-nav {
    background: #fff;
    display: flex;
    height: 200px
  }

  .head-nav > * {
    flex: 1;
  }

  .search-box {
    padding: 30px 40px;
  }

  .search-box > h3 {
    margin: 20px 0;
  }

  .search-input {
    display: flex;
    width: 75%;
    height: 32px;
  }

  .search-input > input {
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    width: calc(100% - 80px);
    padding: 0 6px;
  }

  input:focus-visible {
    outline: none
  }

  .search-input > button {
    background: #409eff;
    border: none;
    border-radius: 0 5px 5px 0;
    color: #fff;
    width: 80px;
  }

  .menu-box {
    background: #fff;
    margin: 15px 0;
    padding: 20px 0;
  }

  .menu-box > div {
    display: flex;
    line-height: 30px;
  }

  .menu-box > div > span {
    width: 100px;
    text-align: right;
  }

  .menu-box > div ul {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 100px);
  }

  .menu-box > div ul > li {
    cursor: pointer;
    padding: 0 15px;
    margin: 0 10px;
  }

  .menu-box > div ul > li.checked {
    background: #409eff;
    border-radius: 4px;
    color: #fff;
  }

  .list-box {
    display: flex;
    flex-wrap: wrap;
    height: 800px; /* 设置固定高度 */
    overflow-y: auto; /* 显示垂直滚动条 */
  }

  .list-box > .single-box {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 180px;
    margin: 24px 15px;
  }

  .list-box > .single-box > img {
    height: 160px;
    width: 100%;
  }

  .list-box > .single-box > h4 {
    font-size: 17px;
    margin: 15px 15px 0 15px;
  }

  .list-box > .single-box > p,
  .list-box > .single-box > time {
    color: #888;
    display: block;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 15px;
    line-height: 1.5;
  }

  .list-box > .single-box > time {
    margin-top: 15px;
  }
</style>
